<template>
    <div style="background: #fff; padding: 30px">
      <div class="Title">E级站点活动列表</div>
      <div class="flewbtn">
        <el-select
          @focus="isFocus"
          @blur="clickBlur"
          v-model="state.value"
          placeholder="展具类型"
          class="elSelect_a"
          size="large"
        >
          <el-option
            v-for="item in state.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :popper-append-to-body="false"
          />
        </el-select>
        <el-select
          v-model="state.valueTwo"
          placeholder="展具级别"
          class="elSelect_a"
          size="large"
        >
          <el-option
            v-for="item in state.optionsTwo"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button size="large" type="primary">查询</el-button>
        <el-button size="large">清除</el-button>
        <el-button size="large">增加</el-button>
      </div>
      <!-- 展示和编辑表格 -->
      <el-scrollbar style="margin-bottom: 20px" height="700px">
        <el-table
          :data="filterTableData"
          :header-cell-style="{
            'text-align': 'center',
            background: '#f2f3f5',
            height: '50px',
            color: '#000000',
            'font-size': '15px',
          }"
          :cell-style="{ 'text-align': 'center' }"
          style="width: 100%"
          height="620"
          ref="multipleTableRef"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="站点名称" prop="siteTitle" width="220" />
          <el-table-column label="活动时间" prop="siteTime" width="220" />
          <el-table-column label="展会名称" prop="siteName" width="220" />
          <el-table-column label="展会号" prop="num" width="180" />
          <el-table-column label="展馆平面图" prop="plan" width="250">
            <template v-slot="scope">
              <img :src="scope.row.plan" min-width="70" height="70" />
            </template>
          </el-table-column>
          <el-table-column label="展馆限高" prop="Height_limit" width="220" />
          <el-table-column label="展馆规格" prop="specs" width="220" />
          <el-table-column label="展具设计" prop="designImg" width="250">
            <template v-slot="scope">
              <img :src="scope.row.designImg" min-width="70" height="70" />
            </template>
          </el-table-column>
          <el-table-column label="展车数量" prop="cars_quantity" width="220" />
          <el-table-column label="货车数量" prop="goods_quantity" width="220" />
          <el-table-column label="活动状态" prop="active_state" width="220" />
          <el-table-column label="管理人员" prop="management" width="220" />
          <el-table-column align="right" width="220">
            <!-- <template #header>
                    <el-input v-model="search" size="small" placeholder="Type to search" />
                  </template> -->
            <template #header>
              <div>操作</div>
            </template>
            <template #default="scope">
              <!-- <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
              <el-button
                size="small"
                @click="handleEdit(scope.$index, scope.row)"
                type="primary"
                text
                >编辑</el-button
              >
              <el-button
                size="small"
                @click="handleDelete(scope.$index, scope.row)"
                type="primary"
                text
                >删除
              </el-button>
              <el-button
                size="small"
                @click="handleDelete(scope.$index, scope.row)"
                type="primary"
                text
                >刷新
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
      <!-- 分页显示 -->
      <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        background
        :page-sizes="[5, 10, 15, 20]"
        :small="small"
        :disabled="disabled"
        layout="total, sizes, prev, pager, next, jumper"
        :total="20"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="display: flex; justify-content: flex-end"
      />
  
      <!-- 编辑对话框 -->
      <el-dialog
        v-model="state.showModel"
        title="编辑项目"
        width="500px"
        align-center
        style="font-weight: 600"
      >
        <el-scrollbar height="600px">
          <div
            style="display: flex; justify-content: center; align-items: center"
          >
            <div
              style="
                flex: 2;
                line-height: 20px;
                text-align: center;
                font-weight: 600;
              "
            >
              创建名称
            </div>
            <el-input
              v-model="state.inputVal"
              size="small"
              style="flex: 8"
              class="enterpriseName"
            />
          </div>
          <div style="display: flex; margin-top: 15px">
            <div
              style="
                flex: 2;
                line-height: 22px;
                text-align: center;
                width: 78px;
                font-weight: 600;
              "
            >
              活动时间
            </div>
            <el-select v-model="state.mouldVal" class="elSelect" size="small">
              <el-option
                v-for="item in state.mouldArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div
            style="
              display: flex;
              justify-content: center;
              align-items: center;
              margin-top: 12px;
            "
          >
            <div
              style="
                flex: 2;
                line-height: 38px;
                text-align: center;
                font-weight: 600;
              "
            >
              展会名称
            </div>
            <el-input
              v-model="state.inputVal"
              style="flex: 8"
              size="small"
              class="enterpriseName"
            />
          </div>
          <div
            style="
              display: flex;
              justify-content: center;
              align-items: center;
              margin-top: 12px;
            "
          >
            <div
              style="
                line-height: 38px;
                text-align: center;
                font-weight: 600;
                margin-left: 32px;
                margin-right: 18px;
              "
            >
              展位号
            </div>
            <el-input
              v-model="state.inputVal"
              style="flex: 8"
              size="small"
              class="enterpriseName"
            />
          </div>
          <div style="display: flex; margin-top: 18px; margin-bottom: 25px">
            <div
              style="
                margin: 20px 18px 17px 7px;
                font-weight: 600;
                width: 88px;
                text-align: end;
              "
            >
              上传图片
            </div>
            <div>
              <el-upload
                v-model:file-list="state.fileList"
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <el-icon><Plus /></el-icon>
              </el-upload>
              <el-dialog v-model="state.dialogVisible">
                <img w-full :src="state.dialogImageUrl" alt="Preview Image" />
              </el-dialog>
              <div style="font-size: 10px; color: #b8b8b8; margin-top: 5px">
                {{ state.picTip }}
              </div>
            </div>
          </div>
          <div
            style="
              display: flex;
              justify-content: center;
              align-items: center;
              margin-top: 12px;
            "
          >
            <div
              style="
                flex: 2;
                line-height: 38px;
                text-align: center;
                font-weight: 600;
              "
            >
              展馆限高
            </div>
            <el-input
              v-model="state.inputVal"
              style="flex: 8"
              size="small"
              class="enterpriseName"
            />
          </div>
          <div
            style="
              display: flex;
              justify-content: center;
              align-items: center;
              margin-top: 12px;
            "
          >
            <div
              style="
                flex: 2;
                line-height: 38px;
                text-align: center;
                font-weight: 600;
              "
            >
              展台规格
            </div>
            <el-input
              v-model="state.inputVal"
              style="flex: 8"
              size="small"
              class="enterpriseName"
            />
          </div>
          <div style="display: flex; margin-top: 15px">
            <div
              style="
                flex: 2;
                line-height: 22px;
                text-align: center;
                width: 78px;
                font-weight: 600;
              "
            >
              路线选择
            </div>
            <el-select v-model="state.mouldVal" class="elSelect" size="small">
              <el-option
                v-for="item in state.mouldArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div style="display: flex; margin-top: 25px; margin-bottom: 25px">
            <div
              style="
                margin: 20px 14px 23px 7px;
                font-weight: 600;
                width: 90px;
                text-align: end;
                display: flex;
              "
            >
              <div>站点</div>
              <div>LOGO</div>
            </div>
            <div>
              <el-upload
                v-model:file-list="state.fileList"
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <el-icon><Plus /></el-icon>
              </el-upload>
              <el-dialog v-model="state.dialogVisible">
                <img w-full :src="state.dialogImageUrl" alt="Preview Image" />
              </el-dialog>
              <div style="font-size: 10px; color: #b8b8b8; margin-top: 5px">
                {{ state.picTip }}
              </div>
            </div>
          </div>
          <div style="display: flex; margin-top: 20px">
            <div
              style="
                font-weight: 600;
                display: flex;
                justify-content: center;
                margin-top: 7px;
                margin-right: 7px;
              "
            >
              分配运营人员
            </div>
            <div
              style="
                flex: 8;
                background-color: #e8e8e8;
                padding-left: 6px;
                border-radius: 3px;
                box-sizing: border-box;
              "
            >
              <el-checkbox-group v-model="state.worktype" :max="1" fill="#409eff">
                <el-checkbox label="张三" name="worktype" />
                <el-checkbox label="李四" name="worktype" />
                <el-checkbox label="王五" name="worktype" />
              </el-checkbox-group>
            </div>
          </div>
          <div style="display: flex; margin-top: 15px">
            <div style="margin: 10px 15px 10px 20px; font-weight: 600">
              站点状态
            </div>
            <el-radio-group
              fill="#409eff"
              v-model="state.radioState"
              size="small"
            >
              <el-radio-button label="启用" />
              <el-radio-button label="停用" />
            </el-radio-group>
          </div>
          <div class="dialog-footer">
            <el-button size="small" @click="centerDialogVisible = false">
              取消
            </el-button>
            <el-button
              type="primary"
              size="small"
              @click="centerDialogVisible = false"
            >
              确认
            </el-button>
          </div>
        </el-scrollbar>
      </el-dialog>
    </div>
  </template>
    
    <script setup>
  import { toRefs, reactive, computed, ref } from "vue";
  import { ArrowDown, Plus } from "@element-plus/icons-vue";
  
  const state = reactive({
    value: "",
    options: [
      {
        value: "展具物流到货",
        label: "展具物流到货",
      },
      {
        value: "卸货说明",
        label: "卸货说明",
      },
      {
        value: "立柱到位立正",
        label: "立柱到位立正",
      },
    ],
    valueTwo: "",
    optionsTwo: [
      {
        value: "B级",
        label: "B级",
      },
      {
        value: "C级",
        label: "C级",
      },
      {
        value: "E级",
        label: "E级",
      },
    ],
    mouldVal: "",
    mouldArr: [
      {
        value: "模板1",
        label: "模板1",
      },
      {
        value: "模板2",
        label: "模板2",
      },
      {
        value: "模板3",
        label: "模板3",
      },
    ],
    modelVal: "选择模板",
    tableData: [
      {
        siteTitle: "乌鲁木齐",
        siteTime: "2023.03.17-03.25",
        siteName: "2023第三届新疆315国际车展",
        num: "20201",
        plan: "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
        Height_limit: "8.5m",
        specs: "20m*40m",
        designImg:
          "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
        cars_quantity: "5台",
        goods_quantity: "2台",
        active_state: "2D201",
        management: "张三",
      },
      {
        siteTitle: "乌鲁木齐",
        siteTime: "2023.03.17-03.25",
        siteName: "2023第三届新疆315国际车展",
        num: "20201",
        plan: "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
        Height_limit: "8.5m",
        specs: "20m*40m",
        designImg:
          "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
        cars_quantity: "5台",
        goods_quantity: "2台",
        active_state: "2D201",
        management: "张三",
      },
      {
        siteTitle: "乌鲁木齐",
        siteTime: "2023.03.17-03.25",
        siteName: "2023第三届新疆315国际车展",
        num: "20201",
        plan: "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
        Height_limit: "8.5m",
        specs: "20m*40m",
        designImg:
          "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
        cars_quantity: "5台",
        goods_quantity: "2台",
        active_state: "2D201",
        management: "张三",
      },
      {
        siteTitle: "乌鲁木齐",
        siteTime: "2023.03.17-03.25",
        siteName: "2023第三届新疆315国际车展",
        num: "20201",
        plan: "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
        Height_limit: "8.5m",
        specs: "20m*40m",
        designImg:
          "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
        cars_quantity: "5台",
        goods_quantity: "2台",
        active_state: "2D201",
        management: "张三",
      },
      {
        siteTitle: "乌鲁木齐",
        siteTime: "2023.03.17-03.25",
        siteName: "2023第三届新疆315国际车展",
        num: "20201",
        plan: "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
        Height_limit: "8.5m",
        specs: "20m*40m",
        designImg:
          "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
        cars_quantity: "5台",
        goods_quantity: "2台",
        active_state: "2D201",
        management: "张三",
      },
      {
        siteTitle: "乌鲁木齐",
        siteTime: "2023.03.17-03.25",
        siteName: "2023第三届新疆315国际车展",
        num: "20201",
        plan: "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
        Height_limit: "8.5m",
        specs: "20m*40m",
        designImg:
          "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
        cars_quantity: "5台",
        goods_quantity: "2台",
        active_state: "2D201",
        management: "张三",
      },
      {
        siteTitle: "乌鲁木齐",
        siteTime: "2023.03.17-03.25",
        siteName: "2023第三届新疆315国际车展",
        num: "20201",
        plan: "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
        Height_limit: "8.5m",
        specs: "20m*40m",
        designImg:
          "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
        cars_quantity: "5台",
        goods_quantity: "2台",
        active_state: "2D201",
        management: "张三",
      },
      {
        siteTitle: "乌鲁木齐",
        siteTime: "2023.03.17-03.25",
        siteName: "2023第三届新疆315国际车展",
        num: "20201",
        plan: "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
        Height_limit: "8.5m",
        specs: "20m*40m",
        designImg:
          "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
        cars_quantity: "5台",
        goods_quantity: "2台",
        active_state: "2D201",
        management: "张三",
      },
      {
        siteTitle: "乌鲁木齐",
        siteTime: "2023.03.17-03.25",
        siteName: "2023第三届新疆315国际车展",
        num: "20201",
        plan: "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
        Height_limit: "8.5m",
        specs: "20m*40m",
        designImg:
          "https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/honda/accord/H5/16-2.png",
        cars_quantity: "5台",
        goods_quantity: "2台",
        active_state: "2D201",
        management: "张三",
      },
    ],
    showModel: false, //显示编辑弹窗
    inputVal: "",
    fileList: [],
    dialogImageUrl: "",
    dialogVisible: false,
    picTip:
      "建议宽高比16:9780*438<尺寸<2560*1440 格式:JPG/JPEG/PNG文件大小≤1000KB",
    radioState: "启用",
    worktype: [],
    vestVal: [],
    siteVest: [],
  });
  
  const isFocus = (e) => {
    console.log("鼠标聚焦了", e);
  };
  const clickBlur = (e) => {
    console.log("鼠标离开了", e);
  };
  
  // 显示图表逻辑
  const search = ref("");
  const filterTableData = computed(() =>
    state.tableData.filter(
      (data) =>
        !search.value ||
        data.name.toLowerCase().includes(search.value.toLowerCase())
    )
  );
  // 编辑
  const handleEdit = (index, row) => {
    state.showModel = true;
    console.log(index, row);
  };
  // 删除
  const handleDelete = (index, row) => {
    console.log(index, row);
  };
  
  // 多选和单选的逻辑
  const multipleTableRef = ref();
  const multipleSelection = ref([]);
  const handleSelectionChange = (val) => {
    multipleSelection.value = val;
    console.log(val, ">>>>>>>>>>>所有选中项");
  };
  
  // 分页显示逻辑
  const currentPage4 = ref(4);
  const pageSize4 = ref(5);
  const small = ref(false);
  const disabled = ref(false);
  
  const handleSizeChange = (val) => {
    console.log(`${val} items per page`);
  };
  const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`);
  };
  
  // 上传图片逻辑
  const handleRemove = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles);
  };
  
  const handlePictureCardPreview = (uploadFile) => {
    console.log(">>>>>>>>预览显示的图片", uploadFile.url);
    state.dialogImageUrl = uploadFile.url;
    state.dialogVisible = true;
  };
  
  // 文本域变量
  const textarea = ref("");
  </script>
    
    <style scoped>
  .Title {
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 20px;
  }
  
  .flewbtn {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .elSelect_a {
    border-radius: 15px;
    width: 250px;
    margin-right: 15px;
  }
  ::v-deep .elSelect_a .el-input__wrapper {
    background-color: #e8e8e8;
    border-color: #c0c4cc;
    box-sizing: border-box;
    box-shadow: none;
  }
  
  .elSelect {
    border-radius: 15px;
    width: 250px;
    /* height: 28px; */
    flex: 8;
  }
  ::v-deep .elSelect .el-input__wrapper {
    background-color: #e8e8e8;
    border-color: #c0c4cc;
    box-sizing: border-box;
    box-shadow: none;
  }
  
  ::v-deep .elSelect .el-input__wrapper:focus {
    background-color: #e8e8e8;
    border-color: #c0c4cc;
    box-sizing: border-box;
    box-shadow: none;
    color: #c0c4cc;
  }
  
  ::v-deep .elSelect .el-input__inner {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    box-shadow: none;
    padding: 0;
  }
  
  /* 改变输入框样式 */
  ::v-deep .enterpriseName .el-input__inner {
    /* width:100%; */
    background-color: #e8e8e8;
    border-color: #c0c4cc;
    color: #000;
    padding: 10px;
    box-sizing: border-box;
    /* border-radius: 5px; */
    height: 25px;
    border-radius: 3px;
  }
  
  .enterpriseName ::v-deep .el-input__inner {
    border: none;
  }
  
  ::v-deep .enterpriseName .el-input__wrapper {
    padding: 0;
  }
  
  /* 改变上传按钮样式 */
  ::v-deep.el-upload--picture-card,
  ::v-deep .el-upload-list__item {
    width: 100px;
    height: 100px;
    line-height: 110px;
    border: none;
    background: #fff;
  }
  
  /* 改变选择器样式 */
  ::v-deep .Selectbox .el-input__wrapper {
    /* width:100%; */
    background-color: #e8e8e8;
    border-color: #c0c4cc;
    color: #000;
    padding: 10px;
    box-sizing: border-box;
    /* border-radius: 5px; */
    height: 28px;
    width: 100% !important;
    flex: 8;
  }
  ::v-deep .Selectbox .el-input__wrapper .el-input__inner {
    border: none;
  }
  /* 改变文本域样式 */
  ::v-deep .textTip .el-textarea__inner {
    background-color: #e8e8e8;
    border-color: #c0c4cc;
    color: #000;
    padding: 10px;
    box-sizing: border-box;
  }
  
  .block-col-2 .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
  }
  
  /* 隐藏横向滚动条 */
  .el-scrollbar__bar {
    display: none !important;
  }
  
  #el-id-878-3 .el-dialog__body {
    padding: 0 !important;
  }
  
  /* 改变上传框框的大小 */
  ::v-deep .el-upload--picture-card {
    border: 1px dashed #e7e7e9;
  }
  ::v-deep .el-upload--picture-card:hover {
    border-color: #e7e7e9;
    color: #e7e7e9;
  }
  ::v-deep .el-upload--picture-card {
    width: 70px;
    height: 70px;
    font-size: 16px !important;
  }
  ::v-deep .el-upload {
    width: 70px;
    height: 70px;
    line-height: 50px;
    font-size: 16px;
  }
  ::v-deep .el-upload-list--picture-card .el-upload-list__item {
    width: 70px;
    height: 70px;
    line-height: 50px;
    font-size: 16px;
  }
  
  ::v-deep .el-upload-list--picture-card .el-upload-list__item-actions:hover {
    opacity: 1;
    font-size: 16px;
  }
  
  ::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail {
    width: 70px;
    height: 70px;
    line-height: 50px;
    font-size: 16px;
  }
  ::v-deep .el-upload--picture-card .el-icon-plus {
    width: 28px;
    height: 28px !important;
    line-height: 1.7 !important;
  }
  ::v-deep .avatar {
    width: 70px;
    height: 70px;
  }
  
  /* 确认按钮样式 */
  .dialog-footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 40px;
  }

  ::v-deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
  background-color: #409eff !important;
}
  </style>
    